<template>
  <div class="message">
    <div class="message-top">
      <div class="message-top-tittle">
        <h3>消息</h3>
      </div>
      <div class="message-top-alert">
        <van-icon class-prefix="aliIconfont" color="#fff" size="30px" name="icon-lingdang"/>
      </div>
    </div>
    <div class="message-center">
      <div class="message-center-box">
        <div class="message-center-box-icon" style="background:linear-gradient(135deg,#FFE7BA, red)">
          <van-icon class-prefix="aliIconfont" color="#fff" size="30px" name="icon-aite"/>
        </div>
        <div class="message-center-box-text">
          <span>@我的</span>
        </div>
      </div>
      <div class="message-center-box">
        <div class="message-center-box-icon" style="background:linear-gradient(135deg,#FFE7BA, orange)">
          <van-icon class-prefix="aliIconfont" color="#fff" size="30px" name="icon-xiaoxi"/>
        </div>
        <div class="message-center-box-text">
          <span>评论</span>
        </div>
      </div>
      <div class="message-center-box">
        <div class="message-center-box-icon" style="background:linear-gradient(135deg,#FFE7BA, #1887FC)">
          <van-icon class-prefix="aliIconfont" color="#fff" size="30px" name="icon-shoucangguanzhu"/>
        </div>
        <div class="message-center-box-text">
          <span>关注</span>
        </div>
      </div>
      <div class="message-center-box">
        <div class="message-center-box-icon" style="background:linear-gradient(135deg,#FFE7BA, #776EFE)">
          <van-icon class-prefix="aliIconfont" color="#fff" size="30px" name="icon-dianzan_kuai"/>
        </div>
        <div class="message-center-box-text">
          <span>赞</span>
        </div>
      </div>
    </div>
    <div class="message-bottom">
      <div class="message-bottom-item" @click="isShow=true">
        <div class="message-bottom-cover">
          <img :src="require('@/assets/head/2.jpeg')">
        </div>
        <div class="message-bottom-info">
          <p class="message-bottom-info-name">米花探探</p>
          <p class="message-bottom-info-message">你好，我叫米花探探</p>
        </div>
      </div>
      <div class="message-bottom-item" @click="isShow=true">
        <div class="message-bottom-cover">
          <img :src="require('@/assets/head/1.jpeg')">
        </div>
        <div class="message-bottom-info">
          <p class="message-bottom-info-name">石原里美</p>
          <p class="message-bottom-info-message">我是个演员，主持人</p>
        </div>
      </div>
      <div class="message-bottom-item" @click="isShow=true">
        <div class="message-bottom-cover">
          <img :src="require('@/assets/head/3.jpeg')">
        </div>
        <div class="message-bottom-info">
          <p class="message-bottom-info-name">我是大舅</p>
          <p class="message-bottom-info-message">外甥你还好吗</p>
        </div>
      </div>
      <div class="message-bottom-item" @click="isShow=true">
        <div class="message-bottom-cover">
          <img :src="require('@/assets/head/4.jpeg')">
        </div>
        <div class="message-bottom-info">
          <p class="message-bottom-info-name">关于故事与否</p>
          <p class="message-bottom-info-message">我们来聊天吧</p>
        </div>
      </div>
      <div class="message-bottom-item" @click="isShow=true">
        <div class="message-bottom-cover">
          <img :src="require('@/assets/head/5.jpeg')">
        </div>
        <div class="message-bottom-info">
          <p class="message-bottom-info-name">卖女孩的小火柴</p>
          <p class="message-bottom-info-message">收到请回答</p>
        </div>
      </div>
    </div>
    <van-popup v-model:show="isShow" position="bottom">
      <div class="message-content" @click="isShow=false">
        <img :src="require('@/assets/messageFake.png')"/>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Icon, Popup } from "vant";
export default {
  components:{
    [Icon.name]:Icon,
    [Popup.name]:Popup
  },
  data(){
    return{
      isShow:false
    }
  }
}
</script>
<style lang="less">
.message{
  height: calc(100vh - 3.125rem);
  position: relative;
  overflow-y: auto;
  &::before{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 125px;
    background: linear-gradient(-45deg,#FFE7BA, orange);
    z-index: -11;
  }
  .message-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin: 0  16px;
    h3{
      margin: 16px 0;
      padding: 0;
    }
  }
  .message-center{
    margin: 0  16px;
    padding: 40px 0;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 4px 4px 4px #999;
    .message-center-box{
      .message-center-box-icon{
        padding: 10px;
        border-radius: 50%;
      }
    }
  }
  .message-bottom{
    margin: 0  16px;
    padding: 20px 0;
    .message-bottom-item{
      display: flex;
      background: #fff;
      align-items: center;
      margin-bottom: 8px;
      padding: 12px;
      box-shadow: 0 0 4px #9999;
      border-radius: 8px;
      .message-bottom-cover{
        width: 50px;
        height: 50px;
        background: #FFE7BA;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .message-bottom-info{
        flex: 1;
        text-align: left;
        padding: 0 16px;
        p{
          padding: 0;
          margin: 0;
        }
        .message-bottom-info-name{
          font-weight: 600;
        }
      }
    }
  }
  .message-content{
    width: 100%;
    height:100vh;
    img{
      width:100%;
      height: 100%;
    }
  }
}
</style>